<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Remodal Test Suite</title>

    <!-- Load local jQuery -->
    <script src="../libs/jquery-loader.js"></script>

    <!-- Load local QUnit -->
    <link rel="stylesheet" href="../libs/qunit/qunit/qunit.css" media="screen">
    <script src="../libs/qunit/qunit/qunit.js"></script>

    <!-- Load local lib and tests -->
    <link rel="stylesheet" href="../src/remodal.css">
    <link rel="stylesheet" href="../src/remodal-default-theme.css">
    <script src="../src/remodal.js"></script>
    <script src="remodal_test.js"></script>
    <style>
      .remodal-overlay.without-animation.remodal-is-opening,
      .remodal-overlay.without-animation.remodal-is-closing,
      .remodal.without-animation.remodal-is-opening,
      .remodal.without-animation.remodal-is-closing,
      .remodal-bg.without-animation.remodal-is-opening,
      .remodal-bg.without-animation.remodal-is-closing {
        animation: none;
      }
    </style>
</head>
<body>

<div class="remodal-bg">
  <div id="qunit"></div>
  <a href="#" data-remodal-target="modal">Call</a>
</div>

<div class="remodal" data-remodal-id="modal">
  <a data-remodal-action="close" class="remodal-close"></a>

  <a data-remodal-action="cancel" class="remodal-cancel" href="#">Cancel</a>
  <a data-remodal-action="confirm" class="remodal-confirm" href="#">OK</a>
</div>

<div class="remodal" data-remodal-id="modal2"
  data-remodal-options="hashTracking: false,
    closeOnConfirm:false,closeOnCancel:  false, closeOnEscape: false , closeOnOutsideClick: false,
    modifier : without-animation with-test-class">

  <a data-remodal-action="close" class="remodal-close"></a>
  <a data-remodal-action="cancel" class="remodal-cancel" href="#">Cancel</a>
  <a data-remodal-action="confirm" class="remodal-confirm" href="#">OK</a>
</div>

<div data-remodal-id="modal3">
  <a data-remodal-action="close" class="remodal-close"></a>
</div>

<div class="remodal" data-remodal-id="!modal4/test">
  <a data-remodal-action="close" class="remodal-close"></a>
</div>

<div data-remodal-id="modal5">
  <a data-remodal-action="close" class="remodal-close"></a>
</div>

<div id="target"></div>
</body>
</html>
